<template>
	<view class="class-detail-container">
		<cc-navbar></cc-navbar>
		<view class="info">
			<view class="info-top fc">
				<view class="info-top-title u-line-1">
					{{ detail.class_name || '' }}
				</view>
				<u-tag plain plainFill shape="circle" v-if="detail.statusData" size="small"
					:type="detail.statusData.type" :text="detail.statusData.label"></u-tag>
			</view>
			<view class="info-bottom">
				<view class="info-bottom-row">
					<view class="info-bottom-info">
						<view class="font-info">班级课程:</view>
						<view class="u-line-1">{{ detail.course_name || '-' }}</view>
					</view>
					<view class="info-bottom-info">
						<view class="font-info">任课老师:</view>
						<view class="u-line-1">{{ detail.teacher_name || '-' }}</view>
					</view>
				</view>
				<view class="info-bottom-row">
					<view class="info-bottom-info">
						<view class="font-info">满班人数:</view>
						<view class="u-line-1">{{ detail.capacity }}</view>
					</view>
					<view class="info-bottom-info">
						<view class="font-info">默认课时:</view>
						<view class="u-line-1">{{ detail.expend_hour || '-' }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-sticky><cc-tabs :list="tabs" :current.sync="current" :scrollable="false" /></u-sticky>
		<view v-show="current === 0">
			<view class="list" v-if="count">
				<block v-for="(row, index) in list" :key="index">
					<cc-classtime :item="row" @complete="getClassCourse(1)"></cc-classtime>
				</block>
			</view>
			<cc-loadmore :loading="loading" :current="list.length" :count="count" />
			<cc-empty v-if="!loading && !count" mode="list" />
		</view>
		<view class="classroom-info" v-show="current === 1">
			<view class="info-cell-group">
				<view class="info-cell" @tap="handleRouter(item.path)" v-for="(item, index) in menus" :key="index">
					<view class="info-cell-left">
						<text>{{ item.label }}</text>
					</view>
					<view class="info-cell-right">
						<u-icon name="arrow-right" size="24rpx" bold color="#111111"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		info as getClassInfo
	} from '@/codecat/api/education/class/index';
	import {
		classCourseList
	} from '@/codecat/api/education/class/classTime';

	export default {
		// 班级详情
		name: 'ClassDetail',
		data() {
			return {
				id: '', // 班级id
				detail: {},
				loading: false,
				list: [],
				count: 0,
				query: {
					cla_id: '',
					page: 1,
					limit: 10
				},
				current: 0,
				tabs: [{
						name: '班级课节',
						badge: {
							value: 0
						}
					},
					{
						name: '班级信息'
					}
				],
				menus: [{
						label: '班级学员',
						path: '/class-student'
					},
					{
						label: '班级排课',
						path: '/class-rule'
					},
					{
						label: '上课记录',
						path: '/attend-list'
					}
				]
			};
		},
		onReachBottom() {
			if (this.list.length < this.count && this.current === 0) {
				this.getClassCourse();
			}
		},
		onLoad() {
			const options = this.$Route.query;
			this.id = options?.id || '';
			if (this.id) {
				this.getClassInfo();
				this.getClassCourse(1);
			}
		},
		methods: {
			getClassInfo() {
				getClassInfo({
					id: this.id
				}).then((res) => {
					let data = res.data || null;
					if (data) {
						const {
							status
						} = data;
						const other = {
							statusData: this.$getDict('recruitStatusOptions', parseFloat(status))
						};
						data = Object.assign(data, other);
					}
					this.detail = data;
				});
			},
			handleRouter(path) {
				this.$Router.push({
					path,
					query: {
						cla_id: this.id
					}
				});
			},
			// 待点名课节
			getClassCourse(first) {
				const query = this.$lodash.cloneDeep(this.query);
				if (first) {
					query.page = 1;
					this.list = [];
					this.count = 0;
				} else {
					query.page += 1;
				}
				this.loading = true;
				classCourseList({
						cla_id: this.id,
						...query
					})
					.then((res) => {
						this.loading = false;
						this.query.page = query.page;
						const {
							list,
							count
						} = res.data;
						this.count = count || 0;
						this.tabs[0].badge.value = this.count || 0;
						if (Array.isArray(list) && list.length) {
							this.$lodash.forEach(list, (e) => {
								e.statusData = this.$getDict('recruitStatusOptions', parseFloat(e.status));
							});
							this.list = this.list.concat(list);
						}
					})
					.catch((_) => {
						this.loading = false;
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>